<!-- 萌宠案例 -->
<template>
	<view class="box-wrapper">
		<view class="menu">
			 <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
		</view>
		<view class="container">
			<view class="list">
				<view class="item" v-for="(item,index) in list">
					<image lazy-load @click="preview(index)" :src="item.url" mode="widthFix"></image>
					<view class="title">{{item.content}}</view>
					<view class="author"> 一 {{item.author}}</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="item"  @click="onRefresh">
				<uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons  type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		<view class="more">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import {ref,computed} from 'vue'
import {onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
const list = ref([])
const current = ref(0)
const menuList = [
	{key:'all',value:'全部'},
	{key:'cat',value:'猫猫'},
	{key:'dog',value:'狗狗'},
	]
const items = computed(()=>menuList.map(item=>item.value))
const onClickItem = (e)=>{
	console.log('e',e)
	current.value = e.currentIndex
	list.value = []
	requests()
}
//导航条上的加载
uni.showNavigationBarLoading()
function requests(){
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:5,
				type:menuList[current.value].key  //all/dog/cat获取什么类型的萌宠
			},
			header:{
				'access-key':'0912&1111'
			}
		}).then(res=>{
			console.log('res',res)
			//请求成功
			if(res.data.errCode === 0 ){
				list.value = [...list.value,...res.data.data]
				return
			}
			if(res.data.errCode === 400 ){
				uni.showToast({
					title:res.data.errMsg,
					icon:'none'
				})
			}
		}).catch(err=>{
			uni.showToast({
				title:err,
				icon:'none'
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh();
		})
}

requests()

//图片预览
const preview = (index)=>{
	let urls = list.value.map((item=>item.url))
	uni.previewImage({
		current:index,
		urls,
	})
}

//触底加载
onReachBottom(()=>{
	requests()
})
//下拉刷新
onPullDownRefresh(()=>{
	console.log('触发下拉刷新')
	list.value = []
	requests()
})

//按钮刷新
const onRefresh = ()=>{
	console.log('点击刷新')
	uni.startPullDownRefresh()
}
//回到顶部
const onTop = ()=>{
	console.log('回到顶部')
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 100
	});
}


</script>

<style lang="scss" scoped>
.box-wrapper{
	width: 100%;
	padding: 40rpx;
	box-sizing: border-box;
	.menu{
		margin-bottom: 30rpx;
	}
	.container{
		width: 100%;
		.list{
			width: 100%;
			.item{
				width: 100%;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
				margin-bottom: 32rpx;
				border-radius: 20rpx;
				image{
					width: 100%;

				}
				.title{
					padding: 20rpx;
					box-sizing: border-box;
				}
				.author{
					padding: 0  20rpx 20rpx;
					text-align: right;
					color: #ccc;
				}
			}
		}
	}
	.bottom{
		position: fixed;
		right: 20rpx;
		bottom: 80rpx;
		.item{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80rpx;
			height: 80rpx;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 50%;
			border: 1rpx solid #888;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}
	}
	.more{
		padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx) ;
	}
}
</style>
